<template>
	<view class="personalCenter">
		<!-- 头部 --- 登录 -->
		<view class="header">
			<!-- 登录状态 -->
			<template v-if="target">
				<image class="avator" :src="dataInfo.avatarUrl" mode=""></image>
				<view class="nickName">
					<text>
						{{ dataInfo.nickName }}
					</text>
					<view style="font-size: 28rpx; text-align: center" @click="exit()">退出登录</view>
				</view>
			</template>
			<!-- 未登录状态 -->
			<template v-else>
				<!-- <image class="avator" src="../../static/images/weidenglu.png" mode=""></image> -->
				<view class="avator" style="display: flex; justify-content: center; align-items: center">
					<image
						style="width: 100%; height: 100%; border-radius: 50%"
						src=""
						mode=""
					></image>
				</view>

				<view class="nickName" @click="toLogin()">
					<text>未登录</text>
					<view>点击登录账号</view>
				</view>
			</template>
		</view>

		<!-- 脖子部分 -->
		<view class="neck">
			<view class="neckitem" v-for="(item, index) in systemInfo[0].first" :key="index">
				<view style="display: flex; justify-content: center">
					<view v-if="index === 1 || index === 4" class="">￥</view>
					<view>
						{{ item.count }}
					</view>
				</view>
				<view>
					{{ item.name }}
				</view>
			</view>
		</view>

		<!-- 订单信息部分 -->
		<view class="order">
			<view class="orderItem" v-for="(item, index) in systemInfo[1].second" :key="index">
				<view class="orderImg">
					<image :src="item.imgUrl" mode=""></image>
				</view>
				<view class="">{{ item.name }}</view>
			</view>
		</view>
		<view class="xianDuan"></view>
	</view>
</template>

<script>
import api from '../../utils/request.js';
export default {
	name: 'mine',
	data() {
		return {
			target: false,
			dataInfo: {},
			systemInfo: []
		};
	},
	created() {
		// 从本地存储中获取个人信息
		wx.getStorage({
			key: 'userInfo',
			success: (res) => {
				console.log(res.data);
				if (res.data) {
					this.dataInfo = JSON.parse(res.data);
					this.target = true;
				}
			}
		});
		this.getPersonInfo();
	},
	methods: {
		// 登录
		toLogin() {
			// 关闭当前页面 跳转到指定界面
			wx.reLaunch({
				url: '/pages/login/login'
			});
		},
		// 退出登录
		exit() {
			wx.setStorage({
				key: 'userInfo',
				data: ''
			});
			wx.reLaunch({
				url: '/pages/index/index'
			});
		},
		// 获取数据
		async getPersonInfo() {
			try {
				const res = await api('/getPersonInfo');
				console.log(res);
				this.systemInfo = res.data;
			} catch (err) {}
		}
	}
};
</script>

<style lang="stylus">
.personalCenter
	background-color: #FFF5EE
	height 100vh
	.header
		height 300rpx
		// line-height 200rpx
		background-color #FFE4C4
		display flex
		border-radius 0 0 40rpx 40rpx
		.avator
			border-radius: 50%
			width 100rpx
			height 100rpx
			// vertical-align: middle 常用于实现图片和文字的垂直居中
			// vertical-align middle
			margin 100rpx 40rpx 0 30rpx
		.nickName
			margin-top 100rpx
			text
				color #FFA500
				font-weight 800
				font-size 40rpx
			view
				color #FFA500
				margin-top 10rpx
				border 2rpx solid #FFA500
				border-radius 10rpx
				height 50rpx
				line-height 50rpx
				font-size 24rpx
	.neck
		padding 50rpx 40rpx
		display flex
		justify-content: space-between
		.neckitem
			width 100rpx
			text-align: center
			font-size: 28rpx
	.order
		// position: relative
		height 160rpx
		background-color #fff
		margin 0 30rpx 30rpx 30rpx
		padding 20rpx
		border-radius 20rpx
		display flex
		justify-content: space-between
		.orderItem
			width 150rpx
			height 100%
			text-align: center
			padding-top: 18rpx
			font-size 26rpx
			// &:nth-child(1)
			// 	border-right 1rpx solid #dcdcdc
			.orderImg
				height 50%
				display: flex
				justify-content: center
				align-items: center
				image
					width 40%
					height 600%
	.xianDuan
		height 100rpx
		border-left 2rpx solid #dcdcdc
		position absolute
		top 530rpx
		left 178rpx
</style>
